<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :title="$t('multiDAnalysis.card.title.contentPublishingSource')">
      <Chart style="width: 100%; height: 300px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import useLoading from "@/hooks/loading"
import useChartOption from "@/hooks/chart-option"

const { chartOption } = useChartOption((isDark) => {
  const graphicElementStyle = {
    textAlign: "center",
    fill: isDark ? "rgba(255,255,255,0.7)" : "#4E5969",
    fontSize: 14,
    lineWidth: 10,
    fontWeight: "bold"
  }
  return {
    legend: {
      left: "center",
      data: ["UGC原创", "国外网站", "转载文章", "行业报告", "其他"],
      bottom: 0,
      icon: "circle",
      itemWidth: 8,
      textStyle: {
        color: isDark ? "rgba(255,255,255,0.7)" : "#4E5969"
      },
      itemStyle: {
        borderWidth: 0
      }
    },
    tooltip: {
      show: true,
      trigger: "item"
    },
    graphic: {
      elements: [
        {
          type: "text",
          left: "9.6%",
          top: "center",
          style: {
            text: "纯文本",
            ...graphicElementStyle
          }
        },
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "图文类",
            ...graphicElementStyle
          }
        },
        {
          type: "text",
          left: "86.6%",
          top: "center",
          style: {
            text: "视频类",
            ...graphicElementStyle
          }
        }
      ]
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        center: ["11%", "50%"],
        label: {
          formatter: "{d}% ",
          color: isDark ? "rgba(255, 255, 255, 0.7)" : "#4E5969"
        },
        itemStyle: {
          borderColor: isDark ? "#000" : "#fff",
          borderWidth: 1
        },
        data: [
          {
            value: [148564],
            name: "UGC原创",
            itemStyle: {
              color: "#249EFF"
            }
          },
          {
            value: [334271],
            name: "国外网站",
            itemStyle: {
              color: "#846BCE"
            }
          },
          {
            value: [445694],
            name: "转载文章",
            itemStyle: {
              color: "#21CCFF"
            }
          },
          {
            value: [445694],
            name: "行业报告",
            itemStyle: {
              color: "#0E42D2"
            }
          },
          {
            value: [445694],
            name: "其他",
            itemStyle: {
              color: "#86DF6C"
            }
          }
        ]
      },
      {
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        label: {
          formatter: "{d}% ",
          color: isDark ? "rgba(255, 255, 255, 0.7)" : "#4E5969"
        },
        itemStyle: {
          borderColor: isDark ? "#000" : "#fff",
          borderWidth: 1
        },
        data: [
          {
            value: [148564],
            name: "UGC原创",
            itemStyle: {
              color: "#249EFF"
            }
          },
          {
            value: [334271],
            name: "国外网站",
            itemStyle: {
              color: "#846BCE"
            }
          },
          {
            value: [445694],
            name: "转载文章",
            itemStyle: {
              color: "#21CCFF"
            }
          },
          {
            value: [445694],
            name: "行业报告",
            itemStyle: {
              color: "#0E42D2"
            }
          },
          {
            value: [445694],
            name: "其他",
            itemStyle: {
              color: "#86DF6C"
            }
          }
        ]
      },
      {
        type: "pie",
        radius: ["50%", "70%"],
        center: ["88%", "50%"],
        label: {
          formatter: "{d}% ",
          color: isDark ? "rgba(255, 255, 255, 0.7)" : "#4E5969"
        },
        itemStyle: {
          borderColor: isDark ? "#000" : "#fff",
          borderWidth: 1
        },
        data: [
          {
            value: [148564],
            name: "UGC原创",
            itemStyle: {
              color: "#249EFF"
            }
          },
          {
            value: [334271],
            name: "国外网站",
            itemStyle: {
              color: "#846BCE"
            }
          },
          {
            value: [445694],
            name: "转载文章",
            itemStyle: {
              color: "#21CCFF"
            }
          },
          {
            value: [445694],
            name: "行业报告",
            itemStyle: {
              color: "#0E42D2"
            }
          },
          {
            value: [445694],
            name: "其他",
            itemStyle: {
              color: "#86DF6C"
            }
          }
        ]
      }
    ]
  }
})
const { loading } = useLoading(false)
</script>

<style scoped lang="less"></style>
